<template>
  <div class="reportDetails-container-padding">
    <el-descriptions :column="1">
      <template #title>
        <div>
          <p>{{ formInline.projectName }}项目</p>
          <p>{{ formInline.quarterNumber }} 季报</p>
        </div>
      </template>
      <el-descriptions-item label="任务计划：">
        {{ formInline.taskPlan }}
      </el-descriptions-item>
      <el-descriptions-item label="完成情况：">
        {{ formInline.completionDescription }}
      </el-descriptions-item>
      <el-descriptions-item label="附件信息：">
        <div
          v-for="j in formInline.relatedDocuments"
          :key="j.id"
          class="applyList"
        >
          <el-link
            :href="j.fileUrl"
            type="primary"
            target="_blank"
            style="margin-right: 10px"
          >
            {{ j.fileName }}
          </el-link>
        </div>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script setup lang="ts">
  import { getQuarterlyInfo } from '@/api/postdoctor'
  import { ref, computed, onMounted } from 'vue'
  import { useRoute } from 'vue-router'

  const route = useRoute()
  const formInline = ref({})
  const getInfo = () => {
    getQuarterlyInfo({ id: route.query.quarterlyId }).then((res) => {
      formInline.value = res.data
    })
  }
  onMounted(() => {
    getInfo()
  })
</script>

<style scoped lang="scss">
  :deep() {
    .el-descriptions__title {
      border-left: 0 !important;
    }
  }

  .applyList {
    display: flex;
    align-items: center;
    margin-top: 10px;
  }
</style>
